/**
 * 链接表格
 */
Vue.component("link-table", {
    template :
        `
        <div>
            <i-button type="text" icon="ios-bookmarks-outline" @click="showLinksManager = true" style="color: white">管理链接</i-button>
            <Modal v-model="showLinksManager" title="redis链接管理...">
                <i-table border :columns="linksManagerTitle" :data="redisLinks" :context="this"></i-table>
                <div slot="footer">
                    <i-button type="primary" @click="closeLinksManager">关闭</i-button>
                </div>
            </Modal>
            <Modal v-model="showEditLink" title="编辑redis链接...">
                <i-form ref="editLinkForm" :model="editLinkForm" :rules="editLinkFormValidate" :label-width="80">
                    <Form-item label="Name : " prop="name">
                        <i-input v-model="editLinkForm.name" placeholder="请输入名称..." :autofocus=true></i-input>
                    </Form-item>
                    <Form-item label="Host : " prop="host">
                        <i-input v-model="editLinkForm.host" placeholder="请输入主机地址..."></i-input>
                    </Form-item>
                    <Form-item label="Port : " prop="port">
                        <i-input v-model="editLinkForm.port" placeholder="请输入端口..."></i-input>
                    </Form-item>
                    <Form-item label="Auth : " prop="auth">
                        <i-input v-model="editLinkForm.auth" placeholder="请输入密码..."></i-input>
                    </Form-item>
                </i-form>
                <div slot="footer">
                    <i-button type="primary" @click="editLinkOk('editLinkForm')">提交</i-button>
                </div>
            </Modal>
        </div>
        `,
    props : ["editLinkForm","editLinkFormValidate","redisLinks"],
    data : function () {
        return {
            showLinksManager : false,
            linksManagerTitle : [
                {
                    title : "name",
                    key : "name"
                },
                {
                    title : "host",
                    key : "detail",
                },
                {
                    title : "操作",
                    key : "action",
                    width : 150,
                    align : "center",
                    render : (h, params) => {
                        return [
                            h("i-button", {
                                props : { type : "primary", size : "small"},
                                on : {
                                    click : () => {
                                        this.linkEdit(params.row._index);
                                    }
                                }
                            }, "编辑"),
                            h("i-button", {
                                props : { type : "error", size : "small"},
                                style : { "margin-left" : "8px" },
                                on : {
                                    click : () => {
                                        this.linkRemove(params.row._index);
                                    }
                                }
                            }, "删除"),
                        ];
                    }
                }
            ],
            showEditLink : false,
            editIndex : 0
        };
    },
    methods : {
        closeLinksManager : function () {
            this.showLinksManager = false;
        },
        linkEdit : function (index) {
            this.showEditLink = true;
            var props = this.redisLinks[index].value.split(",");
            this.editLinkForm = {
                name: props[0],
                host: props[1],
                port: props[2],
                auth: props[3]
            };
            this.editIndex = index;
        },
        linkRemove : function (index) {
            this.$emit("removeLink", index);
        },
        editLinkOk : function (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    //保存链接
                    var value = this.editLinkForm.name + "," + this.editLinkForm.host + "," + this.editLinkForm.port + "," + this.editLinkForm.auth;
                    var link = {
                        value : value,
                        name : this.editLinkForm.name,
                        detail : this.editLinkForm.host + ":" + this.editLinkForm.port
                    };
                    this.$emit("editLink",this.editIndex, link);
                    //关闭窗口
                    this.showEditLink = false;
                    this.$Message.success("redis链接修改成功...");
                } else {
                    this.$Message.error("表单验证失败!");
                }
            });
        }
    }
});